<!--
 * @title: 导入excel组件
 * @author: andy.ten@tom.com & xukaixing@hotmail.com
 * @Date: 2022-04-23 18:46:10
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2022-06-06 11:47:46
 * @version: 1.1.0
 * @copyright: copyright (c) 2022 andyten
 *  node: you can not copy and/or use and/or modify this program free,
 *  please reserve the segment above.Please mail me if you have any question.
-->

<template>
  <ht-dialog title="导入列表数据" :visible.sync="isVisible" :height="dialogHeight">
    <div v-show="isUnloaded" class="ht-import-dialog">
      <ht-upload :upload="upload" :headers="headers" :params="params" accept=".xls,xlsx" :limit="1" upload-type="import" :cb="handleImportCB" />
    </div>
    <ht-table v-show="!isUnloaded" ref="importErrList" ref-table="importErrList" :table-head="importErrHead" :table-data="importErrData" :page-size="500" table-type="import" />
    <template #footer>
      <ht-button type="primary" @click="handleConfirm">确 定</ht-button>
    </template>
  </ht-dialog>
</template>
<script>
import HtUpload from '@/components/HtUpload';
import { setHeader } from '@/api/ht.common';
export default {
  name: 'HtImportDialog',
  components: {
    HtUpload
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
      default: false
    },
    tableHead: {
      type: Array,
      required: true
    },
    refTable: {
      type: String,
      required: true
    },
    import: {
      type: String,
      required: true
    },
    params: {
      type: Object,
      required: true
    },
    cb: {
      type: Function,
      required: false,
      default: undefined
    }
  },
  data() {
    return {
      isUnloaded: true, // 是否上传完成
      isVisible: this.visible,
      upload: this.import,
      headers: setHeader(),
      importErrHead: [
        {
          label: '行',
          prop: 'rowNum',
          fixed: 'left'
        },
        {
          label: '列',
          prop: 'colNum',
          fixed: 'left'
        },
        {
          label: '错误描述',
          prop: 'errorDesc'
        }
      ],
      dialogHeight: document.documentElement.clientHeight * 0.85 + 'px',
      importErrData: {}
    };
  },
  watch: {
    visible(newVal, oldVal) {
      this.confirm = false;
      this.isVisible = newVal;
    },
    isVisible(newValue, oldValue) {
      if (this.isVisible === true) {
        this.confirm = false;
        this.tabFields = this.tableHead;
      } else // 点击取消按钮响应 去掉导入按钮的loading效果
        this.$parent.$refs['ht-table-' + this.refTable].$parent.importBtnLoading = false;

      this.$parent.updateImportDialogShow(newValue);
    },
    tableHead(newVal, oldVal) {
      // console.log(this.tableHead);
    }
  },
  created() {

  },
  mounted() {
  },
  methods: {
    /**
     * @todo: 导入临时表回调方法
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-06-05 17:56:57
     * @param {*} res
     * @param {*} params
     */
    handleImportCB(res, params) {
      this.isUnloaded = false;
      // todo: 显示错误信息
      if (res.datas)
        this.importErrData = res.datas;
      if (res.datas && res.datas.length === 0 && this.cb) {
        // 关闭导入窗口
        this.isVisible = false;
        this.cb(res, params);
      }
    },
    /**
     * @todo: 导入方法
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-06-05 17:57:33
     */
    handleConfirm() {
      if (this.isUnloaded) {
        this.$notify.message('请先导入excel数据表');
        return;
      }
    },
    /**
     * @todo: 导入错误数据
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-06-05 17:57:33
     */
    handleExportError() {
      if (this.isUnloaded) {
        this.$notify.message('请先导入excel数据表');
        return;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ht-import-dialog{
  width: 100%;

  ::v-deep .el-upload-dragger{
    width: 360px;
    height: 150px;
  }
}
</style>
